<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tou {
            height: 60px;
            background-color: #0099cc;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            color: white;
            line-height: 60px;
        }

        .tou .houtai {
            font-size: 20px;
            font-weight: bold;
            margin-right: 40px;
            margin-left: 20px;
        }

        .foot {
            display: flex;
        }

        .foot .left {
            width: 180px;
            height: 900px;
            background-color: #2c3e50;
        }

        .foot .left div {
            box-sizing: border-box;
            width: 180px;
            height: 40px;
            color: white;
            line-height: 40px;
            padding: 0 10px;
        }

        .icon-chevron-thin-right {
            margin-left: 50px;
        }

        .foot .right {
            flex: 1;
            padding: 0 10px;
            background-color: #f5f6fa;
            overflow: hidden;

        }

        .foot .right .daohang {
            display: flex;
            justify-content: space-between;
            height: 40px;
            border-bottom: 1px solid #eee;
            line-height: 40px;
        }

        .foot .right .tu4 {
            overflow: hidden;
        }

        .foot .right .tu4 .tubiao1 {
            float: left;
            width: 270px;
            height: 100px;
            /* background-color: #0096c0; */
            color: white;
            padding: 0 5px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-left: 15px;
        }

        .foot .right .t1 .p1 {
            font-size: 30px;
        }

        .foot .right .t2 {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #2da9cb;
            margin-top: 20px;
            margin-right: 10px;
            text-align: center;
            line-height: 30px;
        }

        .dt1 {
            background-color: #15c377;
        }

        .dt2 {
            background-color: #909080;
        }

        .dt3 {
            background-color: #0096c0;
        }

        .tubiao {
            overflow: hidden;
            margin-top: 20px;
            justify-content: space-around;
            display: flex;
            margin-bottom: 20px;
        }

        .tubiao .xianxing {
            width: 550px;
            height: 400px;
            background-color: white;

        }

        .tubiao .zhuxing {
            width: 550px;
            height: 400px;
            background-color: white;
        }

        .biaodan {
            width: 1120px;
            height: 300px;
            background-color: white;
            margin-top: 10px;
            margin: 0 auto;
            padding: 20px;
        }

        .biaodan table {
            width: 100%;
            border-collapse: collapse;
        }
        .biaodan table td {
            height: 40px;
            border-bottom: 1px solid #eee;
        }
        .wan1 {
            background-color: #5db85b;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        .wan2 {
            background-color: coral;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        .chu1 {
            background-color:orange;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
        .chu2{
            background-color:brown;
            display: inline-block;
            width: 60px;
            height: 30px;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="tou">
            <div class="log">
                <span class="houtai">后台管理系统</span>
                <span class="iconfont icon-shouqi-01"></span>
            </div>
            <div class="hu">
                <span>当前用户：bootsprat中文</span>
                <span>角色：管理员</span>
            </div>
        </div>
        <div class="foot">
            <div class="left">
                <div><span class="iconfont icon-shouye"></span>后台首页<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>设计元素<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>表单元素<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>示例页面<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>常用列表<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>脚本插件<span
                        class="iconfont icon-chevron-thin-right"></span></div>
                <div><span class="iconfont icon-shouye"></span>统计图表<span
                        class="iconfont icon-chevron-thin-right"></span></div>
            </div>
            <div class="right">
                <div class="daohang">
                    <div class="qian">
                        <span class="iconfont icon-ttpodicon2"></span>
                        <span>欢迎首页</span>
                    </div>
                    <div class="hou">
                        <span class="iconfont icon-ttpodicon3"></span>
                        <span>页签操作</span>
                    </div>
                </div>
                <div class="tu4">
                    <div class="tubiao1 dt3">
                        <div class="t1">
                            <p>今日收入</p>
                            <p class="p1">100,000.00</p>
                        </div>
                        <div class="t2">
                            <span class="iconfont icon-31"></span>
                        </div>
                    </div>
                    <div class="tubiao1 dt3">
                        <div class="t1">
                            <p>昨日收入</p>
                            <p class="p1">200,000.00</p>
                        </div>
                        <div class="t2">
                            <span class="iconfont icon-31"></span>
                        </div>
                    </div>
                    <div class="tubiao1 dt1">
                        <div class="t1">
                            <p>月度累计收入</p>
                            <p class="p1">1000,000.00</p>
                        </div>
                        <div class="t2">
                            <span class="iconfont icon-31"></span>
                        </div>
                    </div>
                    <div class="tubiao1 dt2">
                        <div class="t1">
                            <p>年度累计收入</p>
                            <p class="p1">5,000,000.00</p>
                        </div>
                        <div class="t2">
                            <span class="iconfont icon-31"></span>
                        </div>
                    </div>
                </div>
                <div class="tubiao">
                    <div class="zhuxing">
                    </div>
                    <div class="xianxing">
                    </div>
                </div>
                <div class="biaodan">
                    <table>
                        <thead>
                            <tr>
                                <td>#</td>
                                <td>订单号</td>
                                <td>商品名称</td>
                                <td>下单日期</td>
                                <td>状态</td>
                                <td>处理情况</td>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="./mock12.js"></script>
<script>
    var zhu = document.querySelector('.tubiao .zhuxing');
    var ec = echarts.init(zhu);
    ec.setOption({
        title: {
            text: '每月收入',
        },
        legend: {
            top: 15,
        },
        xAxis: {
            data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
        },
        yAxis: {
            min: 1500,
            max: 5000,
            splitNumber: 8,
        },
        series: [
            {
                name: '当前每月收入',
                type: 'bar',
                data: [2600, 1600, 1800, 3300, 4800, 3500, 1700, 2500, 2200, 1800, 3900, 1700],
            },
            {
                name: '同期每月收入',
                type: 'bar',
                data: [2100, 1700, 1900, 3000, 4000, 3700, 1800, 2000, 2800, 2100, 3800, 3700],
                itemStyle: {
                    normal: {
                        color: '#c3e7ff'
                    }
                }
            }
        ]
    });
    var xian = document.querySelector('.tubiao .xianxing');
    var e = echarts.init(xian);
    e.setOption({
        title: {
            text: '每年收入走势',
        },
        legend: {
            top: 15,

        },
        xAxis: {
            data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
        },
        yAxis: {
            min: 20,
            max: 80,
            splitNumber: 7
        },
        series: [
            {
                name: '每年收入走势',
                type: 'line',
                data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
                symbolSize: 10,
                symbol: 'circle',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: 'chartreuse'
                    }
                }
            },
            {
                name: '每年同期收入走势',
                type: 'line',
                data: [46, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 57],
                symbolSize: 10,
                symbol: 'circle',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#eee'
                    }
                }
            }

        ]
    });
    xuanran(data.list)
    function xuanran(data) {
        var str = data.map((item) => {
            return `
            <tr>
            <td>${item.xu}</td>
            <td>${item.danhao}</td>
            <td>${item.sahngpin}</td>
            <td>${item.nian}-${item.yue}-${item.re}</td>
            <td>${item.zhuang==true?"<span class='wan1'>完成</span>" : "<span class='wan2'>未完成</span>"}</td>
            <td>${item.qingk==true?"<span class='chu1'>已处理</span>" : "<span class='chu2'>未处理</span>"}</td>
            </tr>`
        }).join('')
        document.querySelector('table tbody').innerHTML = str
    }
</script>